<template>
    <div class="father">

        父组件
        <div>
            <input type="text" v-model.number="counter">


            <input :value="text" @input="getInput($event)">

        </div>
        <div>inputNum:{{ inputNum }}</div>

        <MyInput v-model="inputNum"></MyInput>
        <div>inputNum2:{{ inputNum2 }}</div>
        <MyInput v-model="inputNum2"></MyInput>


    </div>
</template>

<script setup lang="ts" name='Father'>
import { ref, reactive } from "vue";

import MyInput from "./MyInput.vue";

const counter = ref(0)
const text = ref(99)
const inputNum = ref(10)
const inputNum2 = ref(100)

function getInput(event: Event) {
    console.log("event", event);
    text.value = parseInt((event.target as HTMLInputElement).value)
}


</script>

<style scoped>
.father {

    min-height: 150px;
    padding: 20px;
    background-color: cadetblue;
    border-radius: 10px;

}
</style>